<template>
  <div class="home-page">
    <div class="home-header">
      <div class="con">
        <h1>庸医</h1>
        <div class="search">
          <cp-icon name="home-search" />搜一搜：疾病/症状/医生/健康知识
        </div>
      </div>
    </div>
    <div class="home-navs">
      <van-row>
        <van-col v-for="item in navList" :key="item.name" :span="item.span">
          <router-link
            :to="item.to"
            :class="item.class"
            @click="storage(item.name)"
          >
            <cp-icon :name="`home-${[item.name]}`"></cp-icon>
            <p class="title">{{ item.title }}</p>
            <p class="desc" v-if="item.desc">{{ item.desc }}</p>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <div class="home-banner">
      <van-swipe indicator-color="#fff">
        <van-swipe-item>
          <img src="@/assets/gg.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/gg.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <van-tabs shrink sticky v-model:active="active">
      <van-tab title="关注" name="like">
        <follow-doctor></follow-doctor>
        <knowledeg-list type="like"></knowledeg-list>
      </van-tab>
      <van-tab title="推荐" name="recommend">
        <knowledeg-list type="recommend"></knowledeg-list
      ></van-tab>
      <van-tab title="减脂" name="fatReduction">
        <knowledeg-list type="fatReduction"></knowledeg-list
      ></van-tab>
      <van-tab title="饮食" name="food">
        <knowledeg-list type="food"></knowledeg-list
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import KnowledegList from '@/views/Home/components/KnowledegList.vue'
import FollowDoctor from '@/views/Home/components/FollowDoctor.vue'
import type { Nav } from '@/types/data'
import type { KnowledgeType } from '@/types/consult'
import { ref } from 'vue'
import { useConsultStore } from '@/stores/modules/consult'
import { ConsultType } from '@/enums/index'

const navList: Nav[] = [
  {
    span: '8',
    to: '/',
    class: 'nav',
    name: 'doctor',
    title: '问医生',
    desc: '按科室查问医生'
  },
  {
    span: '8',
    to: '/consult/fast',
    class: 'nav',
    name: 'graphic',
    title: '极速问诊',
    desc: '20s医生极速回复'
  },
  {
    span: '8',
    to: '/',
    class: 'nav',
    name: 'prescribe',
    title: '开药门诊',
    desc: '线上买药更方便'
  },
  {
    span: '6',
    to: '/',
    class: 'nav min',
    name: 'order',
    title: '药品订单'
  },
  {
    span: '6',
    to: '/',
    class: 'nav min',
    name: 'docs',
    title: '健康档案'
  },
  {
    span: '6',
    to: '/',
    class: 'nav min',
    name: 'rp',
    title: '我的处方'
  },
  {
    span: '6',
    to: '/',
    class: 'nav min',
    name: 'find',
    title: '疾病查询'
  }
]
const active = ref<KnowledgeType>('recommend')

const store = useConsultStore()

const storage = (name: string) => {
  if (name == 'graphic') {
    store.setType(ConsultType.Fast)
  }
}
</script>

<style lang="scss" scoped>
.home {
  &-page {
    padding-bottom: 50px;
  }
  &-header {
    height: 100px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 90px;
      background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
      border-bottom-left-radius: 150px 20px;
      border-bottom-right-radius: 150px 20px;
    }
    .con {
      position: relative;
      padding: 0 15px;
      > h1 {
        font-size: 18px;
        color: #fff;
        font-weight: normal;
        padding: 20px 0;
        line-height: 1;
        padding-left: 5px;
      }
      .search {
        height: 40px;
        border-radius: 20px;
        box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 20px;
        color: var(--cp-dark);
        font-size: 13px;
        .cp-icon {
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
  }
  &-navs {
    padding: 10px 15px 0 15px;
    .nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0;
      .cp-icon {
        font-size: 48px;
      }
      .title {
        font-weight: 500;
        margin-top: 5px;
        color: var(--cp-text1);
      }
      .desc {
        font-size: 11px;
        color: var(--cp-tag);
        margin-top: 2px;
      }
      &.min {
        .cp-icon {
          font-size: 31px;
        }
        .title {
          font-size: 13px;
          color: var(--cp-text2);
          font-weight: normal;
        }
      }
    }
  }
  &-banner {
    padding: 10px 15px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
